<!-- import React, { useRef, useState } from 'react';

function EditableDiv() {
  const [content, setContent] = useState('这是一个可编辑的 div');
  const divRef = useRef();

  const handleInput = () => {
    setContent(divRef.current.textContent);
  };

  return (
    <div
      contentEditable
      onInput={handleInput}
      ref={divRef}
    >
      {content}
    </div>
  );
}

export default EditableDiv; -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./_react/react.development.js"></script>
    <script src="./_react/react-dom.development.js"></script>
    <script src="./_react/babel.js"></script>
  </head>
  <body>
    <div id="apppp" class="ttt"></div>
    <script type="text/babel">
      function Appp() {
        const [content, setContent] = React.useState("这是一个可编辑的 div");
        const divRef = React.useRef();

        const handleInput = () => {
          setContent(divRef.current.textContent);
        };

        return (
          <div contentEditable onInput={handleInput} ref={divRef}>
            {content}
          </div>
        );
      }

      ReactDOM.render(<Appp />, document.querySelector(".ttt"));
    </script>
  </body>
</html>
